<template>
  <div class="navigation-view" :style="{padding:showStyle}">
    <div class="content" :style="`background-color:${bgColor}`">
      <div v class="banner-contaner" :style="{padding:bannerShowStyle}">
        <div class="banner" :style="{backgroundSize:bannerImgStyle}" />
      </div>
      <div class="list">
        <div v-for="i in 10" :key="i" class="list-item">
          <div class="icon">
            <img :src="require(`../../../../../assets/icons/nav/${i}.png`)" width="100%" height="100%" :style="{borderRadius:iconStyle}">
          </div>
          <div class="text" :style="{color:fontColor}">数据{{ i }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'NavigationView',
  props: {
    options: {
      type: Object,
      default: null
    }
  },
  computed: {
    bannerShowStyle() {
      return this.options.banner.showStyle
    },
    bannerImgStyle() {
      return this.options.banner.imgStyle
    },
    showStyle() {
      return this.options.showStyle
    },
    fontColor() {
      return this.options.fontColor
    },
    bgColor() {
      return this.options.bgColor
    },
    iconStyle() {
      return this.options.iconStyle
    }
  }
}
</script>
<style lang="scss" scoped>
.content{
  background-color: #fff;
}
.banner{
  background-image: url('../../../../../assets/images/G2urVA.png');
  height: 87px;
}
.list{
  display: flex;
  flex-wrap: wrap;
  padding-top: 17px;
}
.list-item{
  width: 20%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 12px;
}
.icon{
  width: 43px;
  height: 43px;
  margin-bottom: 12px;
}
.text{
  font-size: 13px;
}
</style>
